import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Table, Pagination, Message, Dialog, Button, Balloon, Loading, Dropdown, Menu, Upload, Grid } from '@alifd/next';
import IceContainer from '@icedesign/container';
import TableFilter from './TableFilter';
import { ApiOfGraphPage } from '#/utils/graphApiDefine'
import SearchTableWrapper from '#/hoc/SearchTableWrapper'
import '#/mock/mock'

const { Row, Col } = Grid;
@SearchTableWrapper(ApiOfGraphPage)
export default class SearchTable extends Component {
  static displayName = 'SearchTable';

  static propTypes = {};

  static defaultProps = {};

  constructor() {
    super();
    this.state = {
      loading: false,
    };
  }

  // 渲染操作按钮示例
  renderOper = (value, index, item) => {
    let that = this;
    const linkProps = {
      to: "/devops/graph/editor"
    };
    return (
      <div>
        <Link {...linkProps}>编辑</Link>
        <span style={that.props.styles.separator} />
        <Button onClick={() => this.props.deleteConfirm(item, this.onDeleteConfirmOk.bind(this))} type="primary" text>删除</Button>
      </div>
    );
  }

  onDeleteConfirmOk = item => {
    return ApiOfResourceDelete(item.code)
  }

  render() {
    const { instances } = this.props.bindingData;
    let DisplayTable =
      <div>
        <Table
          dataSource={instances.data}
          loading={this.props.loading}
          hasBorder={false}
          style={{ padding: '0 20px 20px' }}
          onSort={this.props.handleSort}
        >
          <Table.Column title="ID" dataIndex="id" sortable={true} />
          <Table.Column title="名称" dataIndex="name" />
          <Table.Column width={200} title="创建时间" dataIndex="created_at" />
          <Table.Column
            width={140}
            title="操作"
            cell={this.renderOper}
          />
        </Table>
      </div>
    let ActionBar =
      <div style={styles.formItem}>
        <Link to="/devops/graph/editor" style={{ 'marginLeft': '10px' }}><Button type="primary">创建</Button></Link>
      </div>
    return (
      <IceContainer style={this.props.styles.container}>
        <Loading visible={this.state.loading} fullScreen shape="fusion-reactor">

          <TableFilter
            filter={this.props.filter}
            match={this.props.match}
          />
          <Row wrap gutter="20" style={styles.formRow}>
            <Col l="8">
              {ActionBar}
            </Col>
            <Col l="16">
              <Pagination
                style={{ 'marginBottom': '10px', ...this.props.styles.pagination }}
                shape="arrow-only"
                pageSizeSelector="filter"
                current={this.props.page}
                total={instances.pageable.totalElements}
                totalRender={total => `总数: ${total}`}
                pageSize={instances.pageable.size}
                onChange={this.props.handlePaginationChange}
                onPageSizeChange={this.props.handlePageSizeChange}
              />
            </Col>
          </Row>
          {DisplayTable}
        </Loading>
      </IceContainer>
    );
  }
}

const styles = {
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
};